import React, { Component } from 'react';
import './index.css';

import FormInput from '../../core/components/form.input';
import FormSelect from '../../core/components/form.select';
import Dialog from '../../core/utils/dialog';
import { Get, Post, getHost, UpdateFile } from '../../core/utils/fetch';
import Header from '../../core/components/header';

const idMatch = /id=(\d+)/

class ServiceEdit extends Component {

    static contextTypes = {
        router: React.PropTypes.object.isRequired
    };

    static defaultProps = {
        starDataList: [
            {name: "一星", value: "1"},
            {name: "二星", value: "2"},
            {name: "三星", value: "3"},
            {name: "四星", value: "4"},
            {name: "五星", value: "5"},
        ],
    };

    id = ""

    constructor(props) {
        super(props);
        let m = idMatch.exec(props.location.search);
        if (m) {
            this.id = m[1];
        }
    }

    state = {
        imageSrc: 'img/up.png',
        serviceData: {},
    };

    componentDidMount = () => {
        this._refresh();
    };

    render() {
        let { serviceData } = this.state;
        serviceData.location = serviceData.location || {};
        return (
            <div>
                <Header title="客服编辑" subTitle="Money Manage"></Header>
                <div className="">
                    <h3>个人信息</h3>

                    <div className="row">
                        <div className="col-lg-2">
                            <div className="pic-upload" style={{ "marginTop": "20px" }}>
                                <label>
                                    <input id="cusomterImage" type="file" className="up-true" placeholder="上传图片" onChange={this._changeFile} />
                                    <img src={this.state.imageSrc} alt="" className="img-thumbnail up-false" />
                                </label>
                            </div>
                        </div>
                        <div className="col-lg-6">
                            <form role="form">
                                <FormInput className="has-success" label="姓名*" name="name" dataItem={serviceData}></FormInput>
                                <FormInput className="has-success" label="从业年限*" name="years" dataItem={serviceData}></FormInput>
                                <FormInput className="has-success" label="联系号码*" name="phone" dataItem={serviceData}></FormInput>
                                <FormSelect className="has-success" label="服务星级*" name="starLevel" dataItem={serviceData} dataList={this.props.starDataList}></FormSelect>
                                <FormSelect className="has-success" label="所属区域*" name="id" dataItem={serviceData.location} dataUrl="/api/dict/location" dataHandler={this._dataHandler}></FormSelect>
                                <div className="color-green">
                                    带*为必填项
                                </div>
                                <button type="button" className="btn btn-primary" style={{ "marginRight": "10px" }} onClick={this._save}>保存</button>
                                <button type="button" className="btn btn-primary" onClick={this._back}>返回</button>
                            </form>
                        </div>
                    </div>


                </div>
            </div>
        );
    }

    _changeFile = () => {
        var file = window.jQuery('#cusomterImage')[0].files[0]; //获取file对象
        if (!/image\/\w+/.test(file.type)) {
            return false;
        }
        var reader = new window.FileReader(); //声明一个FileReader实例
        reader.readAsDataURL(file); //调用readAsDataURL方法来读取选中的图像文件
        reader.onload = (e) => {
            if (e.total > 100 * 1024) {

            } else {
                this.setState({ imageSrc: reader.result });
            }
        };
    };

    _refresh = () => {
        if (this.id) {
            Get(`/spi/customerService/info/${this.id}`)
                .then((serviceData) => {
                    this.setState({ serviceData, imageSrc: `${getHost()}/api/file/${serviceData.headImg}` });
                });
        } else {
            this.setState({ serviceData: {} });
        }
    };

    _save = () => {
        let file = window.jQuery('#cusomterImage')[0];
        if (file.files) {
            UpdateFile(window.jQuery('#cusomterImage')[0], (imgId) => {
                let { serviceData } = this.state;
                serviceData.headImg = imgId;
                this._call();
            });
        }
        else {
            this._call();
        }
    };

    _back = () => {
        this.context.router.history.goBack();
    };

    _call = () => {
        let { serviceData } = this.state;
        Post('/spi/customerService/update', serviceData)
            .then((r) => {
                Dialog.alert(serviceData.id ? '更新成功' : '新增成功', () => {
                    this.context.router.history.goBack();
                });
            });
    };
}

export default ServiceEdit;